<template>
  <div class="app-container">
    <el-row>
      <el-input
        size="medium"
        placeholder="值、类别"
        suffix-icon="el-icon-search"
        style="width: 250px"
        v-model="query.s"
        @keyup.enter.native="search"
      >
      </el-input>

      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="search">搜索</el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        {{ $t("table.add") }}
      </el-button>
    </el-row>

    <el-row>
      <el-table :data="ls" style="width: 100%" v-loading="loading">
        <el-table-column prop="code" label="键"> </el-table-column>
        <el-table-column prop="name" label="值"> </el-table-column>
        <el-table-column prop="category" label="类别"> </el-table-column>
        <el-table-column prop="desc" label="描述"> </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="230"
          class-name="fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button
              icon="el-icon-edit"
              @click="handlModify(row)"
              circle
            ></el-button>
            <el-button
              icon="el-icon-delete"
              @click="destory(row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-row>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.page"
          :limit.sync="query.size"
          @pagination="loadDicLs"
        />
      </el-row>
    </el-row>
    <el-dialog title="编辑字典信息" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="tmpModel"
        :close-on-click-modal="false"
        label-position="left"
        label-width="100px"
        style="width: auto; margin-left: 50px"
      >
        <el-form-item label="键" prop="code">
          <el-input v-model="tmpModel.code" />
        </el-form-item>

        <el-form-item label="值" prop="name">
          <el-input v-model="tmpModel.name" />
        </el-form-item>

        <el-form-item label="类别" prop="category">
          <el-select
            v-model="tmpModel.category"
            filterable
            allow-create
            default-first-option
            placeholder="请选择分组名称"
          >
            <el-option
              v-for="item in categories"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 10px">（可添加）</span>
        </el-form-item>

        <el-form-item label="描述" prop="desc">
          <el-input v-model="tmpModel.desc" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="editData">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import { dicList, saveDic, destoryDic } from "@/api/datatranform";

import { cloneDeep } from "lodash";
import { Form } from "element-ui";
import { parseTime } from "@/utils";
import { use } from "vue/types/umd";
import Pagination from "@/components/Pagination/index.vue";
@Component({
  name: "DicList",
  components: {
    Pagination,
  },
})
export default class extends Vue {
  mounted() {
    this.loadDicLs();
  }

  private search() {
    this.query.page = 1;
    this.loadDicLs();
  }
  private loading: boolean = true;
  private query = {
    page: 1,
    size: 10,
    s: "",
    c: "",
  };
  private total = 0;
  private dialogFormVisible: boolean = false;
  private defaultModel = {
    code: "",
    name: "",
  };

  private rules = {
    code: [
      {
        required: true,
        message: "不能为空且",
        trigger: "blur",
      },
      { min: 1, max: 30, message: "长度在3到30个字符", trigger: "blur" },
    ],
    category: [
      {
        required: true,
        message: "不能为空且",
        trigger: "blur",
      },
      { min: 1, max: 30, message: "长度在3到30个字符", trigger: "blur" },
    ],
    name: [
      { required: true, message: "不能为空", trigger: "blur" },
      { min: 1, max: 100, message: "名称长度在2到100个字符", trigger: "blur" },
    ],
  };

  private tmpModel: any = this.defaultModel;
  private isNew: boolean = false;

  private handlModify(row: any) {
    this.tmpModel = cloneDeep(row);
    this.dialogFormVisible = true;
    this.isNew = true;
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate();
    });
  }
  private handleCreate() {
    this.tmpModel = cloneDeep(this.defaultModel);
    this.dialogFormVisible = true;
    this.isNew = true;
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate();
    });
  }

  private async destory(row: any) {
    this.$confirm("删除将不可恢复，您确定要删除吗？").then(async (val: any) => {
      let d = await destoryDic([row.id]);
      this.search();
      this.$message({
        message: "删除成功",
        type: "success",
      });
    });
  }
  private editData() {
    (this.$refs.dataForm as Form).validate(async (valid) => {
      if (valid) {
        const model = this.tmpModel;
        this.dialogFormVisible = false;
        const { data } = await saveDic(model);
        this.loadDicLs();
        this.$message({
          message: "操作成功",
          type: "success",
        });
      }
    });
  }
  private ls: Array<any> = [];
  private categories: Array<any> = [];
  private async loadDicLs() {
    this.loading = true;
    const { data } = await dicList(this.query);
    this.ls = data.content;
    this.total = data.totalElements;
    this.categories = data.categories;
    this.loading = false;
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  float: right;
}
</style>